//JournalPeriodList Page Less
.journal-period-list-container {
  .journal-period-tree-list-container {
    display: flex;
    gap: 20px;

    .journal-period-tree-wrapper {
      min-height: 500px;
      width: 180px;
      background: #F2F5FA;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #A3A3A3;
      padding: 10px 0;

      .ant-tree {
        font-weight: 600;
        background: #F2F5FA;

        .ant-tree-indent-unit {
          width: 6px;
        }

        .ant-tree-node-content-wrapper {
          padding: 0;
        }

        .ant-tree-switcher {
          > .anticon {
            color: #F08C4D;
          }
        }

        .ant-tree-treenode {
          font-size: 16px;
          font-weight: 600;
          color: #4E4E4E;
          .ant-tree-iconEle a{
            color: #4E4E4E;
          }


          &.ant-tree-treenode-leaf {
            font-size: 12px;
            font-weight: 400;
          }

          .ant-tree-node-selected {
            color: #1E60C5;
            .ant-tree-iconEle a{
              color: #1E60C5;
            }
          }
        }
      }


    }

    .journal-period-article-list {
      flex: 1;
      min-height: 500px;

      > .ant-spin-nested-loading {
        > .ant-spin-container {
          display: flex;
          flex-direction: column;
          gap: 10px;
        }
      }

      &.journal-period-article-list-empty {
        > .ant-spin-nested-loading {
          //height: 100%;

          > .ant-spin-container {
            padding-top: 100px;
          }
        }
      }

      /*.hx-article-simple-item-container {
        border: 1px solid transparent;
        border-bottom: 1px solid #F1F1F1;
        border-radius: 0px 4px 4px 4px;

        &:hover {
          background: #F6FAFF;
          border-color: #F1F1F1
        }
      }*/
    }
  }

  .journal-period-card-list-container {
    .jp-collapse {

      .jp-collapse-year-item-header {
        display: flex;
        gap: 8px;
        align-items: center;

        .jp-collapse-year-item-title {
          font-weight: 600;
          font-size: 18px;
          color: #4E4E4E;
        }

        .jp-collapse-year-item-tj {
          font-weight: 400;
          font-size: 14px;
          color: #969696;
        }
      }

      .jp-collapse-items {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 16px;
      }


    }
  }

}




@media (max-width: @screen-md-max) {
  .journal-period-list-container {
    .journal-period-tree-list-container {
      flex-direction: column;
      .journal-period-tree-wrapper {
        width: 100%;
      }
    }
  }
}

